<template>
  <div class="box">
    <div class="header">业务经营情况</div>
    <div v-show="type === '2'">
      <div class="item">
        <div class="itemLine">
          <span class="itemIcon"></span>
          <div class="itemText">财务数据总览</div>
        </div>
      </div>
      <div class="fdItem">
        <div class="fdBox">
          <div class="topBar">
            <div class="topBox">
              <div>
                <el-form
                  ref="headerSearchForm"
                  :model="headerSearchForm"
                  :inline="true"
                >
                  <el-form-item label="报告日期" prop="customerName">
                    <el-date-picker
                      v-model="dateValue"
                      type="daterange"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-form>
                <div>
                  <el-row>
                    <el-col :span="16" style="text-align: left">
                      <el-button type="primary" class="btn" @click="add"
                        >新增</el-button
                      >
                      <el-button type="primary" class="btn">导出</el-button>
                      <el-button type="primary" class="btn" @click="getFinanceData">查询</el-button>
                      <el-button type="primary" class="btn"  @click="reset">重置</el-button>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </div>
          </div>
          <div class="right">
            <div class="tableBox">
              <el-table :data="tableData" class="tableBoxChild">
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column label="序号" align="center" type="index">
                </el-table-column>
                <el-table-column
                  prop="rowNo"
                  label="编号"
                  align="center"
                  width="130"
                ></el-table-column>
                <el-table-column
                  prop="reportDate"
                  label="报告日期"
                  align="center"
                  width="120"
                >
                </el-table-column>
                <el-table-column prop="unit" label="单位" align="center">
                </el-table-column>
                <el-table-column
                  prop="totalAssets"
                  label="资产总计"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="totalLiabilities"
                  label="负债总计"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="pShareholdersEquity"
                  label="归属母公司股东权益"
                  align="center"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  prop="shareholdersEquity"
                  label="股东权益合计"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="operateIncome"
                  label="营业总收入"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="profitBeforeTax"
                  label="税前利润"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="pNetProfit"
                  label="归属母公司股东净利润"
                  align="center"
                  width="120"
                >
                </el-table-column>
                <el-table-column
                  prop="currentLiabilities"
                  label="资产负债率"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="netProfitIncrease"
                  label="净利润增长率"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="netAssetsRatio"
                  label="净资产收益率"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="totalAssetsRatio"
                  label="总资产回报率"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="netProfitRatio"
                  label="毛利率"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="currentRatio"
                  label="流动比率"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="speedRatio"
                  label="速动比率"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  fixed="right"
                  width="120"
                >
                  <template slot-scope="scope">
                    <span @click="edit(scope.row)" class="operator">编辑</span>
                    <span @click="deleteFinanceRowNo(scope.row)" class="operator">删除</span>
                  </template>
                </el-table-column>
              </el-table>
              <!-- <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                @current-change="pageFn"
              >
              </el-pagination> -->
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="pageFn"
                :current-page.sync="pageNum"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="clientServer">
        <clientServer></clientServer>
      </div> -->
      <div class="module">
        <div class="title">财务数据统计</div>
        <div class="content">
          <div class="top">
            <el-radio-group v-model="radio3" size="mini" border="true" @change="changeRadio3">
              <el-radio-button label="资产负债" @click="changeTab('1')"></el-radio-button>
              <el-radio-button label="资产质量" @click="changeTab('2')"></el-radio-button>
              <el-radio-button label="盈利能力" @click="changeTab('3')"></el-radio-button>
              <el-radio-button label="资本指标" @click="changeTab('4')"></el-radio-button>
            </el-radio-group>
            <el-radio-group
              v-model="radio2"
              size="mini"
              border="true"
              style="margin-left: auto"
              @change="changeDate"
            >
              <el-radio-button label="今年以来"></el-radio-button>
              <el-radio-button label="近一年"></el-radio-button>
              <el-radio-button label="近三年"></el-radio-button>
              <el-radio-button label="全部"></el-radio-button>
            </el-radio-group>
            <div style="margin-left: 10px">
              <el-date-picker
                v-model="value1"
                type="monthrange"
                range-separator="-"
                start-placeholder="开始"
                end-placeholder="结束"
                @change="changeDate2"
              >
              </el-date-picker>
            </div>
          </div>
          <div>
            <span>指标&nbsp;</span>
            <el-select v-model="selectedValue" clearable placeholder="请选择" multiple @change="changeIndex">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div id="monthlyDistribution"></div>
        </div>
      </div>
    </div>
    <div v-show="type === '1'">
      <div class="module">
        <div class="title">产品业绩走势</div>
        <div class="content">
          <div class="top">
            <el-radio-group v-model="radio4" size="mini" border="true" @change="change6">
              <el-radio-button label="收益率"></el-radio-button>
              <el-radio-button label="夏普比率"></el-radio-button>
              <el-radio-button label="最大回撤"></el-radio-button>
            </el-radio-group>
            <el-radio-group
              v-model="radio5"
              size="mini"
              border="true"
              style="margin-left: auto" @change="changeDateProduct"
            >
              <el-radio-button label="今年以来"></el-radio-button>
              <el-radio-button label="近一年"></el-radio-button>
              <el-radio-button label="近三年"></el-radio-button>
              <el-radio-button label="全部"></el-radio-button>
            </el-radio-group>
            <div style="margin-left: 10px" >
              <el-date-picker
                v-model="value2"
                type="monthrange"
                range-separator="-"
                start-placeholder="开始"
                end-placeholder="结束"
                @change="changeDateProduct2"
              >
              </el-date-picker>
            </div>
          </div>
          <div id="productDistribution"></div>
        </div>
      </div>
    </div>
    <!-- 新增编辑弹框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      destroy-on-close
    >
      <el-form
        ref="dealMajorForm"
        :model="dealMajorForm"
        label-width="180px"
        inline
        :rules="rules"
      >
        <el-form-item label="编号" prop="rowNo">
          <el-input v-model="dealMajorForm.rowNo" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="报告日期" prop="reportDate">
          <el-date-picker
            v-model="dealMajorForm.reportDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyyMMdd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="单位" prop="unit">
          <el-input v-model="dealMajorForm.unit" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="资产总计" prop="totalAssets">
          <el-input v-model="dealMajorForm.totalAssets" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="负债总计" prop="totalLiabilities">
          <el-input v-model="dealMajorForm.totalLiabilities" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="归属母公司股东权益" prop="pShareholdersEquity">
          <el-input v-model="dealMajorForm.pShareholdersEquity" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="股东权益合计" prop="shareholdersEquity">
          <el-input v-model="dealMajorForm.shareholdersEquity" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="营业总收入" prop="operateIncome">
          <el-input v-model="dealMajorForm.operateIncome" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="税前利润" prop="profitBeforeTax">
          <el-input v-model="dealMajorForm.profitBeforeTax" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="资产负债率" prop="currentLiabilities">
          <el-input v-model="dealMajorForm.currentLiabilities" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="归属母公司股东净利润" prop="pNetProfit">
          <el-input v-model="dealMajorForm.pNetProfit" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="净利润增长率" prop="netProfitIncrease">
          <el-input v-model="dealMajorForm.netProfitIncrease" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="净利润收益率" prop="netAssetsRatio">
          <el-input v-model="dealMajorForm.netAssetsRatio" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="总资产回报率" prop="totalAssetsRatio">
          <el-input v-model="dealMajorForm.totalAssetsRatio" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="毛利率" prop="netProfitRatio">
          <el-input v-model="dealMajorForm.netProfitRatio" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="流动比率" prop="currentRatio">
          <el-input v-model="dealMajorForm.currentRatio" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-form-item label="速动比率" prop="speedRatio">
          <el-input v-model="dealMajorForm.speedRatio" placeholder="请输入">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" class="btn">取 消</el-button>
        <el-button type="primary" @click="handleOk" class="gray-btn"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import clientServer from './clientServer.vue';
import moment from "moment";
import {
  saveFinance,
  getFinance,
  getProductFinance,
  updateFinance,
  deleteFinance
} from "@/api/customerManagement/customerView.js";
export default {
  components: {
    clientServer,
  },
  props: {
    type: {
      type: String,
      default: '1',
    },
    customerId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      fundMetric:'收益率',
      dateValue:[],
      dialogVisible: false,
      selectedValue:[],
      radio1: '总笔数',
      value1: '',
      value2: '',
      radio2: '今年以来',
      radio3: '资产负债',
      radio4: '收益率',
      dealStatus: [],
      radio5: '今年以来',
      options: [
        {
          value: '资产总额',
          label: '资产总额',
        },
        {
          value: '贷款总额',
          label: '贷款总额',
        },
        {
          value: '负债总额',
          label: '负债总额',
        },
        {
          value: '存款总额',
          label: '存款总额',
        },
        {
          value: '存贷比',
          label: '存贷比',
        },
        {
          value: '资产负债率',
          label: '资产负债率',
        },
      ],
      options1: [
        {
          value: '资产总额',
          label: '资产总额',
        },
        {
          value: '贷款总额',
          label: '贷款总额',
        },
        {
          value: '负债总额',
          label: '负债总额',
        },
        {
          value: '存款总额',
          label: '存款总额',
        },
        {
          value: '存贷比',
          label: '存贷比',
        },
        {
          value: '资产负债率',
          label: '资产负债率',
        },
      ],
      options2: [
        {
          value: '不良贷款比例',
          label: '不良贷款比例',
        },
        {
          value: '关注贷款比例',
          label: '关注贷款比例',
        },
        {
          value: '拔备覆盖率',
          label: '拔备覆盖率',
        },
      ],
      options3: [
        {
          value: '营业收入',
          label: '营业收入',
        },
        {
          value: '净利润',
          label: '净利润',
        },
        {
          value: '利息净收入',
          label: '利息净收入',
        },
        {
          value: '资产收益率',
          label: '资产收益率',
        },
        {
          value: '手续费佣金收入',
          label: '手续费佣金收入',
        },
        {
          value: '净资产收益率',
          label: '净资产收益率',
        },
        {
          value: '投资收益',
          label: '投资收益',
        },
      ],
      options4: [
        {
          value: '净资本额',
          label: '净资本额',
        },
        {
          value: '一级净资本额',
          label: '一级净资本额',
        },
        {
          value: '资本充足率',
          label: '资本充足率',
        },
        {
          value: '核心资本充足率',
          label: '核心资本充足率',
        },
      ],
      dealMajorForm: {
        rowNo:'',//编号
        reportDate:'',//报告日期
        unit:'',//单位
        totalAssets:'',//资产总计
        totalLiabilities:'',//负债总计
        pShareholdersEquity:'',//归属母公司股东权益
        shareholdersEquity:'',//股东权益合计
        operateIncome:'',//营业总收入
        profitBeforeTax:'',//税前利润
        currentLiabilities:'',//资产负债率
        pNetProfit:'',//归属母公司股东净利润
        netProfitIncrease:'',//净利润增长率
        netAssetsRatio:'',//净利润收益率
        totalAssetsRatio:'',//总资产回报率
        netProfitRatio:'',//毛利率
        currentRatio:'',//流动比率
        speedRatio:'',//速动比率
      },
      rules: {
        rowNo: [{ required: true, message: '必填项', trigger: 'blur' }],
        totalAssets: [{ required: true, message: '必填项', trigger: 'blur' }],
        totalLiabilities:[{ required: true, message: '必填项', trigger: 'blur' }],
        pShareholdersEquity:[{ required: true, message: '必填项', trigger: 'blur' }],
        shareholdersEquity:[{ required: true, message: '必填项', trigger: 'blur' }],
        operateIncome:[{ required: true, message: '必填项', trigger: 'blur' }],
        profitBeforeTax:[{ required: true, message: '必填项', trigger: 'blur' }],
        currentLiabilities:[{ required: true, message: '必填项', trigger: 'blur' }],
        pNetProfit:[{ required: true, message: '必填项', trigger: 'blur' }],
        netProfitIncrease:[{ required: true, message: '必填项', trigger: 'blur' }],
        netAssetsRatio:[{ required: true, message: '必填项', trigger: 'blur' }],
        totalAssetsRatio:[{ required: true, message: '必填项', trigger: 'blur' }],
        netProfitRatio:[{ required: true, message: '必填项', trigger: 'blur' }],
        currentRatio:[{ required: true, message: '必填项', trigger: 'blur' }],
        speedRatio:[{ required: true, message: '必填项', trigger: 'blur' }],
      },
      tableData: [],
      headerSearchForm: {
        customerName: '',
        customerType: '',
        customerPly: '',
        customerSubType: '',
      },
      total: 0,
      pageNum: 1,
      pageSize: 10,
      shareholderType: [],
      typeSubData: [],
      customerPlyData: [
        {
          label: '战略',
          value: 'strategy',
        },
        {
          label: '重要',
          value: 'significance',
        },
        {
          label: '长尾',
          value: 'longTail',
        },
      ],
      title: '',
      echartsData:[]
    };
  },
  mounted() {
    this.getFinanceData();
    this.drawProductLine();
    this.changeRadio3('资产负债')
  },
  methods: {
    changeDateProduct(){
      this.value2='';
      this.drawProductLine();
    },
    
    changeDateProduct2(){
      this.radio5='';
      this.drawProductLine(true);
    },
    change6(val){
      this.fundMetric=val;
      this.drawProductLine();
    },
    changeTab(val){
      console.log(1)  
      if(val==='1')this.options=this.options1;
      if(val==='2')this.options=this.options2;
      if(val==='3')this.options=this.options3;
      if(val==='4')this.options=this.options4;

    },
    reset(){
      this.dateValue = []
      this.pageNum = 1;
      this.pageSize = 10;
      this.getFinanceData()
    },
    add() {
      this.title = '新增';
      this.dialogVisible = true;
    },
    edit(row) {
      this.title = '编辑';
      this.dialogVisible = true;
      this.dealMajorForm = {...row}
    },
    getFinanceData(){
      let startDate='';
      let endDate='';
      if(this.dateValue[0]!==null&&this.dateValue[0]!==undefined&&this.dateValue[0]!=='')startDate=moment(this.dateValue[0]).format('YYYYMMDD');
      if(this.dateValue[1]!==null&&this.dateValue[1]!==undefined&&this.dateValue[1]!=='')endDate=moment(this.dateValue[1]).format('YYYYMMDD');
      getFinance({
        customerId:this.customerId,
        startDate:startDate,
        endDate:endDate,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }).then((res) => {
        if(res.status=="success"){
          this.tableData = res.data.records
          this.pageNum = res.data.current;
          this.pageSize = res.data.size;
          this.total = res.data.total;
        }
      })
    },
    pageFn() {
      console.log(this.pageNum,'pageNum')
      this.getFinanceData();
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.getFinanceData();
    },
    deleteFinanceRowNo(row){
      console.log(row,'deleteRow')
      deleteFinance({rowNo:row.rowNo}).then((res)=>{
        if(res.status==='success')this.$message.success("删除成功");
        else this.$message.error("删除失败");
        this.getFinanceData();
      })
    },
    handleOk() {
      this.$refs["dealMajorForm"].validate(async (valid) => {
        if (valid) {
          if (this.title === "新增") {
            const params = {
              ...this.dealMajorForm,
              customerId:this.customerId,
            };
            saveFinance(params)
              .then((res) => {
                if(res.status=="success")
                this.$message.success("新增成功");
                this.getFinanceData();
                this.dialogVisible = false;
              })
          }
          if (this.title === "编辑") {
            const params = {
              ...this.dealMajorForm,
              customerId:this.customerId,
            };
            updateFinance(params)
              .then((res) => {
                this.$message.success("编辑成功");
                this.getFinanceData();
                this.dialogVisible = false;
              })
          }
        } else {
          return false;
        }
      });
    },
    toCustomerView() {
      this.$router.replace('/customerManagement/customerView');
    },
    changeRadio3(val){
      console.log('change3',val)
      if(val=='资产负债'){
        this.options=this.options1;
      }
      
      if(val=='资产质量'){
        this.options=this.options2;
      }
      
      if(val=='盈利能力'){
        this.options=this.options3;
      }
      
      if(val=='基本指标'){
        this.options=this.options4;
      }
    },
    changeIndex(val,val2){
      console.log(val,'val')
      this.selectedValue = val
      let legendData = []
      legendData = val
      let seriesData = []
      val.map(item=>{
        seriesData.push({
          name:item,
          data: [],
          yIndex:item=='资产负债率'?1:0,
          type: 'line',
          symbol: 'none',
        })
      })
      let startDate = '';
      let endDate = '';
      if(val2===true){
        console.log(this.value1,'value1')
          startDate=moment(this.value1[0]).format('YYYYMMDD')+'01';
          endDate=moment(this.value1[1]).format('YYYYMMDD')+'01';
      }else{
        if(this.radio2=='今年以来'){
        startDate = moment().startOf('year').format('YYYYMMDD')
        endDate = moment().format('YYYYMMDD')
      }else if(this.radio2=='近一年'){
        startDate = moment().subtract(1,'year').format('YYYYMMDD')
        endDate = moment().format('YYYYMMDD')
      }else if(this.radio2=='近三年'){
        startDate = moment().subtract(3,'year').format('YYYYMMDD')
        endDate = moment().format('YYYYMMDD')
      }else if(this.radio2=='全部'){
        startDate = ''
        endDate = ''
      }
      }
      
      getFinance({
        customerId:this.customerId,
        startDate:startDate,
        endDate:endDate,
        pageNum: 1,
        pageSize: 2000,
      }).then((res) => {
        if(res.status=="success"){
          this.echartsData = res.data.records
          console.log(this.echartsData,'echartsData')
          let xData = []
          this.echartsData.map(item=>{
            xData.push(item.reportDate)
          })
          seriesData.map(item2=>{
            
            if(item2.name==='资产总额'){
              this.echartsData.map(item1=>{
                console.log(item1,'pushitem1')
                item2.data.push(item1.totalAssets)
              })
            }
            if(item2.name==='贷款总额'){
              this.echartsData.map(item1=>{
                item2.data.push(item1.totalAssets)
              })
            }
            if(item2.name=='负债总额'){
              this.echartsData.map(item1=>{
                item2.data.push(item1.totalLiabilities)
              })
            }
            if(item2.name=='存款总额'){
              this.echartsData.map(item1=>{
                item2.data.push(item1.totalLiabilities)
              })
            }
            if(item2.name=='存贷比'){
              this.echartsData.map(item1=>{
                item2.data.push(item1.totalLiabilities)
              })
            }
            if(item2.name=='资产负债率'){
              this.echartsData.map(item1=>{
                item2.data.push(item1.currentLiabilities)
              })
            }
          })
          console.log(seriesData,'123123')
          this.drawLine(legendData,xData,seriesData)
        }
      })
    },
    changeDate(){
      this.value1=''
      this.changeIndex(this.selectedValue)
    },
    
    changeDate2(){
      this.radio2=''
      this.changeIndex(this.selectedValue,true)
    },
    drawLine(legendData,xData,seriesData) {
      let myChart = this.$echarts.init(
        document.getElementById('monthlyDistribution')
      );
      let option;
      option = {
        tooltip: {
          trigger: 'axis',
        },
        color:['#fff','yellow','blue','pink','#fff'],
        legend:{
          data:legendData,
          textStyle: {    //图例文字的样式
            color: '#ffffff',  //文字颜色
            fontSize: 12    //文字大小
          },
          itemWidth:10,
          itemHeight:10,
          icon:'circle'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xData,
          axisLabel: {
            color: '#fff',
          },
          axisLine: {
            lineStyle: {
              color: '#fff',
            },
          },
        },
        yAxis: [{
          type: 'value',
          axisLabel: {
            color: '#fff',
          },
          axisLine: {
            show: false,
          },
        }, {
          type: 'value',
          axisLabel: {
            color: '#fff',
          },
          axisLine: {
            show: false,
          },
        }],
        series: seriesData,
      };
      console.log(option,'option')
      myChart.clear()
      myChart.setOption(option);
    },
    // pageFn() {},
    drawProductLine(val) {
      let myChart = this.$echarts.init(
        document.getElementById('productDistribution')
      );
      let xData=[];
      let seriesDatas=[];
      let startDate = '';
      let endDate = '';
      if(val===true){
        console.log(this.value2,'value2')
          startDate=moment(this.value2[0]).format('YYYYMMDD')+'01';
          endDate=moment(this.value2[1]).format('YYYYMMDD')+'01';
      }else{
        if(this.radio5=='今年以来'){
        startDate = moment().startOf('year').format('YYYYMMDD')
        endDate = moment().format('YYYYMMDD')
      }else if(this.radio5=='近一年'){
        startDate = moment().subtract(1,'year').format('YYYYMMDD')
        endDate = moment().format('YYYYMMDD')
      }else if(this.radio5=='近三年'){
        startDate = moment().subtract(3,'year').format('YYYYMMDD')
        endDate = moment().format('YYYYMMDD')
      }else if(this.radio5=='全部'){
        startDate = ''
        endDate = ''
      }
      }
      
      getProductFinance({
        customerId:this.customerId,
        startDate:startDate,
        endDate:endDate,
        pageNum: 1,
        pageSize: 2000,
      }).then((res)=>{
        res.data.forEach(element => {
          console.log(this.fundMetric)
          if (this.fundMetric==='收益率')seriesDatas.push(element.avgReturn);
          if (this.fundMetric==='夏普比率')seriesDatas.push(element.sharpRatio);
          if (this.fundMetric==='最大回撤')seriesDatas.push(element.maxDownSide);
          xData.push(element.tradeDate);
        });
        console.log(seriesDatas)
        let option;
      option = {
        // legend:{
        //   icon:'circle'
        // },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xData,
          axisLabel: {
            color: '#fff',
          },
          axisLine: {
            lineStyle: {
              color: '#fff',
            },
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#fff',
          },
          min: 0,
          max: 25,
          interval: 5,
          axisLine: {
            show: false,
          },
        },
        series: [
          {
            data: seriesDatas,
            name: '收益率(%)',
            type: 'line',
            lineStyle: {
              color: '#fff',
              width: 1,
            },
            symbol: 'none',
          },
        ],
      };
      myChart.setOption(option);


      })
     
    },
  },
};
</script>
<style lang="scss" scoped>
.el-table ::v-deep th.el-table__cell {
  background-color: #1c2238 !important;
  color: #fff;
}

.box {
  // width: 1400px;
  // height: 500px;
  height: calc(100vh - 160px);
  overflow: scroll;
  .header {
    background: #354060;
    line-height: 50px;
    padding-left: 20px;
    font-size: 16px;
    font-weight: 700;
  }
  .topBar {
    min-height: 80px;
    background-color: #262d47;
    padding: 20px;
    padding-top: 10px;
    padding-left: 16px;
    padding-bottom: 0px;
  }

  .topBox {
    span {
      display: inline-block;
    }

    .searchBtn {
      margin-left: 20px;
    }

    .zj {
      margin-left: 20px;
    }

    .khTitle {
      height: 30px;
      line-height: 30px;
      vertical-align: top;
      color: #ffffff;
      font-size: 14px;
      font-weight: 700px;
      margin-right: 10px;
    }

    .khInput,
    .zjInput {
      height: 30px;
      line-height: 30px;
      width: 200px;
      overflow: hidden;
      border: 1px solid rgba(126, 163, 255, 0.3);
      color: #ffffff;
      background-color: #363657;
      border-radius: 3px;
      cursor: pointer;
      text-align: center;
      line-height: 30px;
      padding: 0px 10px;
      font-size: 12px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .zjTitle {
      height: 30px;
      line-height: 30px;
      vertical-align: top;
      color: #ffffff;
      font-size: 14px;
      font-weight: 700px;
      margin-right: 10px;
    }
  }

  .left {
    width: 240px;
    background-color: #262d47;
    height: 100%;
  }

  .right {
    flex: 1;
    height: 88%;
    display: flex;
    flex-direction: column;
  }

  .searchList {
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    height: 700px;
    overflow: scroll;

    .searchListItem {
      height: 35px;
      line-height: 35px;
      text-align: center;
      color: #959fc5;
      font-size: 12px;
      overflow: hidden; //超出隐藏
      white-space: nowrap; //不折行
      text-overflow: ellipsis; //溢出显示省略号
    }

    .searchListItem:hover {
      background: #1f9bfd !important;
      color: #fff;
      cursor: pointer;
    }
  }

  .searchListItemAct {
    background: #1f9bfd !important;
    color: #fff !important;
  }

  .bondCard {
    background-color: #262d47;
    color: #ffffff;
    margin-bottom: 10px;

    .info {
      display: flex;
      padding: 15px 20px;

      .infoItem {
        flex: 1;
      }
    }

    .infoItemLabel {
      margin-right: 30px;
      font-size: 14px;
    }

    .infoItemVal {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #d6dcff;
    }
  }

  .el-table ::v-deep th.el-table__cell {
    background-color: #1c2238 !important;
    color: #fff;
  }

  .tableBox {
    background-color: #262d47;
    // flex: 1;
    padding: 15px 10px;
    // width: 1426px;
  }

  .tableBoxChild {
    // min-height: 500px;
    // width: 700px;
  }

  .el-pagination {
    text-align: right;
  }

  .leftTitle {
    height: 40px;
    line-height: 40px;
    background: #354060;
    font-size: 14px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #ffffff;
    padding-left: 17px;
    margin-bottom: 10px;
  }

  .customersCardTitle {
    height: 40px;
    background: #354060;
    font-size: 14px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #ffffff;
    padding: 10px 16px;
  }
}
.operator {
  color: #1f9bfd;
  margin-right: 8px;
  cursor: pointer;
}
::v-deep {
  .el-dialog {
    border-top: 4px solid rgba($color: #1f9bfd, $alpha: 0.9);
    .el-dialog__header {
      border-bottom: 1px solid rgba(126, 163, 255, 0.3);
      padding: 0;
      height: 49px;
      line-height: 49px;
      padding-left: 16px;
    }
    .el-dialog__footer {
      border-top: 1px solid rgba(126, 163, 255, 0.3);
    }
  }
}
.itemLine {
  height: 38px;
  line-height: 38px;
  position: relative;
  margin-top: 5px;
}
.itemIcon {
  width: 5px;
  height: 28px;
  background-color: #08b0f0;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
}
.itemText {
  display: inline-block;
  padding-left: 25px;
}
.fdItem {
  padding: 0 10px;
}
.fdBox {
  border: 1px solid rgb(57, 81, 127);
}
.clientServer {
  margin-top: 20px;
  margin-bottom: 30px;
  height: 500px;
}
.module {
  padding: 14px;
}
.content {
  border: 1px solid #39517f;
  padding: 14px;
  .top {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
}
.title {
  line-height: 18px;
  border-left: 5px solid #08b0f0;
  padding-left: 16px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
::v-deep {
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background-color: #8c97bb;
  }
  .el-radio-button__inner {
    background-color: #1b2238;
    border-color: #6794df;
    color: #fff;
  }
  .el-date-editor--monthrange.el-input,
  .el-date-editor--monthrange.el-input__inner {
    width: 200px;
    line-height: 28px;
  }
  .el-input__inner,
  .el-date-editor .el-range-input {
    background-color: #1b2238;
    border-color: #6794df;
  }
  .el-range-editor.el-input__inner {
    height: 28px;
  }
  .el-date-editor .el-range__icon,
  .el-date-editor .el-range__close-icon {
    line-height: 0;
  }
  .el-radio-button:first-child .el-radio-button__inner {
    border-color: #6794df;
  }
}
#cwstatistics {
  width: 100%;
  height: 320px;
}
#monthlyDistribution {
  width: 100%;
  height: 320px;
}
#productDistribution {
  width: 100%;
  height: 320px;
}
</style>
